<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="mine">
		<el-container>
			<el-aside width="200px">
				<el-menu
					style="height: 96%"
					default-active="2"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
				>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							个人设置</template
						>
						<el-menu-item index="1-1" @click="me">个人信息</el-menu-item>
						<el-menu-item index="1-2" @click="address">地址管理</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-location"></i>
							我的淘宝</template
						>
						<el-menu-item index="2-1" @click="orders">已买到的宝贝</el-menu-item>
						<el-menu-item index="2-2">我的收藏</el-menu-item>
					</el-submenu>
					<el-menu-item index="3" @click="shoppingCat">
						<i class="el-icon-location"></i>
						购物车</el-menu-item
					>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view class="mine" name="mine"></router-view>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
			}
		},
		methods: {
			handleOpen(key, keyPath) {},
			handleClose(key, keyPath) {},
			address() {
				if (this.$route.path != '/mine/addressList')
					this.$router.push('/mine/addressList')
			},
			me() {
				if (this.$route.path != '/me') this.$router.push('/me')
			},
			shoppingCat() {
				if (this.$route.path != '/mine/shoppingCart')
					this.$router.push('/mine/shoppingCart')
			},
			orders(){
				if (this.$route.path != '/mine/orders')
				this.$router.push('/mine/orders')
			}
		},
	}
</script>

<style scoped>
	.el-submenu:first-child {
		margin-top: 10px;
	}
</style>